extends ../_layout

block active
  - sidebar_active = 'animations.html'

block content
  //- this mixin builds panel with a button
  //- to trigger a specific animation on a target element
  mixin anim-panel-manual(animation)
    // START panel
    .panel.panel-default(id='panel-anim-#{animation}')
      .panel-heading
        = animation
      .panel-body
        // Animation trigger
        a(href='#', data-animate="", data-target="#panel-anim-#{animation}", data-play="#{animation}")
          em.fa.fa-play.fa-2x
    // END panel


  h3 Animations
    small animo is a powerful little tool that makes managing CSS animations extremely easy. 
  - var animations = ['bounce','flash','pulse','rubberBand','shake','swing','tada','wobble','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','flip','flipInX','flipInY','flipOutX','flipOutY','lightSpeedIn','lightSpeedOut','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','hinge','rollIn','rollOut','zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp','zoomOut','zoomOutDown','zoomOutLeft','zoomOutRight','zoomOutUp']

  // START row
  .row
    - each val in animations
      .col-md-2
        +anim-panel-manual(val)
  // END row

  h3.page-header Trigger Animations on Scroll
  .row
    .col-md-4
      // START panel
      .panel.panel-default(data-animate="", data-play="bounceIn", data-offset="0")
        .panel-heading bounceIn
        .panel-body 
          code animate
          code data-play="bounceIn" 
          code data-offset="0"

      // END panel
    .col-md-4
      // START panel
      .panel.panel-default(data-animate="", data-play="fadeInDown", data-offset="0")
        .panel-heading fadeInDown
        .panel-body 
          code animate
          code data-play="fadeInDown" 
          code data-offset="0"
      // END panel
    .col-md-4
      // START panel
      .panel.panel-default(data-animate="", data-play="fadeInLeftBig", data-offset="0", data-delay="1000")
        .panel-heading fadeInLeftBig
        .panel-body 
          code animate
          code data-play="fadeInLeftBig" 
          code data-offset="0" 
          code data-delay="1000"
      // END panel


